import React from 'react';
import { useParams, Link } from 'react-router-dom';
import { ArrowLeft, ArrowRight, Share2, Bookmark, Clock, User, Tag } from 'lucide-react';
export function GuideDetail() {
  const {
    guideId
  } = useParams();
  // This would normally come from an API or database
  // For this example, we're using a hardcoded guide based on the ID
  const guides = {
    'hiking-boots': {
      title: 'How to Choose Your First Hiking Boots',
      subtitle: 'Finding the perfect pair of hiking boots can mean the difference between an enjoyable trek and a painful ordeal.',
      category: 'Gear Selection',
      readTime: '12 min read',
      author: 'Sarah Johnson',
      authorImage: 'https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
      publishDate: 'June 15, 2023',
      heroImage: 'https://images.unsplash.com/photo-1542124292-60272943bc2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
      tags: ['Footwear', 'Hiking', 'Beginners', 'Gear Selection'],
      content: `
        <h2>Introduction</h2>
        <p>A good pair of hiking boots is one of the most important pieces of gear for any hiker or backpacker. The right boots will protect your feet, provide support and traction, and help prevent injuries on the trail. But with countless options available, choosing your first pair can be overwhelming.</p>
        <p>This comprehensive guide will walk you through everything you need to know to select the perfect hiking boots for your needs, from understanding different types to finding the right fit.</p>
        <h2>Understanding Boot Types</h2>
        <p>Hiking footwear generally falls into three categories, each designed for different types of terrain and hiking styles:</p>
        <ul>
          <li><strong>Hiking Shoes:</strong> Low-cut models with flexible midsoles, ideal for day hiking on well-maintained trails with light loads.</li>
          <li><strong>Hiking Boots:</strong> Mid- to high-cut models that provide more ankle support and are suitable for weekend backpacking trips with moderate loads.</li>
          <li><strong>Backpacking Boots:</strong> High-cut models with stiff midsoles designed for multi-day trips with heavy loads on rugged terrain.</li>
        </ul>
        <h2>Key Features to Consider</h2>
        <h3>Boot Cut</h3>
        <p>The height of the boot affects ankle support and protection:</p>
        <ul>
          <li><strong>Low-cut:</strong> Lightweight and flexible, but offer minimal ankle support.</li>
          <li><strong>Mid-cut:</strong> Provide some ankle support and balance.</li>
          <li><strong>High-cut:</strong> Offer maximum ankle support and protection, especially important when carrying heavy loads.</li>
        </ul>
        <h3>Materials</h3>
        <p>Common materials used in hiking boots include:</p>
        <ul>
          <li><strong>Full-grain leather:</strong> Durable and water-resistant, but less breathable and requires break-in time.</li>
          <li><strong>Split-grain leather:</strong> Often combined with nylon mesh for breathability, but less water-resistant.</li>
          <li><strong>Nubuck leather:</strong> Full-grain leather that's been buffed to resemble suede; durable and water-resistant.</li>
          <li><strong>Synthetics:</strong> Nylon and polyester are lighter, dry faster, and break in more quickly, but may wear out faster.</li>
        </ul>
        <h2>Waterproofing</h2>
        <p>Many hiking boots feature waterproof membranes like GORE-TEX® or eVent®. These keep water out while allowing your feet to breathe. However, they can reduce breathability in hot conditions and add to the boot's price.</p>
        <p>Consider where and when you'll be hiking most often. If you frequently hike in wet conditions, waterproofing is essential. If you primarily hike in hot, dry climates, you might prefer non-waterproof boots for better breathability.</p>
        <h2>Finding the Right Fit</h2>
        <p>The most important aspect of choosing hiking boots is finding the right fit. Here's how:</p>
        <ul>
          <li>Shop late in the day when your feet are slightly swollen, similar to how they'll be on the trail.</li>
          <li>Wear the socks you plan to hike in.</li>
          <li>Make sure there's enough room to wiggle your toes, but your heel should stay in place.</li>
          <li>Walk up and down an incline if the store has one. Your toes shouldn't hit the front of the boot when going downhill.</li>
          <li>Try on multiple brands and models. Each manufacturer uses different "lasts" (foot forms) that may fit your feet differently.</li>
        </ul>
        <h2>Breaking In Your Boots</h2>
        <p>Never take new boots on a long hike without breaking them in first. Start by wearing them around the house, then on short walks, gradually increasing distance. This allows the boots to conform to your feet and helps identify any potential problem areas before you're miles from the trailhead.</p>
        <h2>Our Top Recommendations for Beginners</h2>
        <h3>Best All-Around Hiking Boot: Salomon X Ultra 4 Mid GTX</h3>
        <p>Combining the agility of a trail runner with the support and protection of a hiking boot, the Salomon X Ultra 4 Mid GTX is an excellent choice for beginners. It offers waterproofing, good traction, and moderate ankle support without excessive weight.</p>
        <h3>Best Budget Option: Merrell Moab 2 Mid Waterproof</h3>
        <p>The Merrell Moab has earned its nickname "Mother Of All Boots" for good reason. It offers solid performance at a reasonable price point, making it perfect for hikers just getting started.</p>
        <h3>Best for Technical Terrain: La Sportiva Nucleo High II GTX</h3>
        <p>If your hiking ambitions include more challenging terrain, the La Sportiva Nucleo provides excellent traction and support with a surprisingly light weight.</p>
        <h2>Conclusion</h2>
        <p>Choosing your first pair of hiking boots doesn't have to be intimidating. Focus on finding boots that match your hiking style and terrain, and prioritize fit above all else. The right boots will be your faithful companions for many miles of adventure.</p>
        <p>Remember that even the most expensive, highly-rated boots won't perform well if they don't fit your unique feet. Take your time with the selection process, and you'll be rewarded with comfortable, blister-free hiking for years to come.</p>
      `,
      relatedGuides: [{
        id: 'layering',
        title: 'The Art of Layering for Outdoor Adventures',
        image: 'https://images.unsplash.com/photo-1521038199265-bc482db0f923?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80'
      }, {
        id: 'ultralight-packing',
        title: 'Ultralight Backpacking: A Complete Guide',
        image: 'https://images.unsplash.com/photo-1602156498253-ad0c84c1d008?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80'
      }]
    },
    layering: {
      title: 'The Art of Layering for Outdoor Adventures',
      subtitle: 'Master the science of staying comfortable in any weather condition with our comprehensive guide to layering systems.',
      category: 'Skills & Techniques',
      readTime: '15 min read',
      author: 'Michael Chen',
      authorImage: 'https://images.unsplash.com/photo-1607990281513-2c110a25bd8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=100&q=80',
      publishDate: 'May 22, 2023',
      heroImage: 'https://images.unsplash.com/photo-1521038199265-bc482db0f923?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
      tags: ['Clothing', 'All Seasons', 'Techniques', 'Comfort'],
      content: `
        <h2>Introduction to the Layering System</h2>
        <p>The key to comfort in the outdoors isn't bringing the perfect jacket for the forecasted weather—it's understanding and implementing a versatile layering system that can adapt to changing conditions and your activity level. Effective layering allows you to make quick adjustments to maintain comfort whether you're hiking uphill in bright sunshine or hunkering down in a sudden storm.</p>
        <h2>The Three-Layer System</h2>
        <p>The traditional approach to outdoor layering consists of three main components:</p>
        <h3>Base Layer: The Foundation</h3>
        <p>Your base layer sits directly against your skin and serves two primary purposes:</p>
        <ul>
          <li>Wicking moisture away from your skin to prevent chilling</li>
          <li>Providing a thin layer of insulation</li>
        </ul>
        <p>Base layers are typically made from synthetic materials (polyester, polypropylene), merino wool, or silk. Avoid cotton as it retains moisture and can cause dangerous cooling when wet.</p>
        <p><strong>Recommended options:</strong> Smartwool Merino 150, Patagonia Capilene, Icebreaker 200 Oasis</p>
        <h3>Mid Layer: The Insulation</h3>
        <p>The mid layer's primary purpose is insulation—trapping body heat to keep you warm. The thickness and type of mid layer should be selected based on activity level and conditions:</p>
        <ul>
          <li><strong>Fleece:</strong> Excellent breathability and maintains some insulation when damp, but offers little wind protection</li>
          <li><strong>Down:</strong> Superior warmth-to-weight ratio and highly compressible, but loses insulating properties when wet</li>
          <li><strong>Synthetic insulation:</strong> Maintains insulation when wet and dries quickly, but typically heavier and less compressible than down</li>
        </ul>
        <p><strong>Recommended options:</strong> Patagonia R1, Arc'teryx Atom LT, Mountain Hardwear Ghost Whisperer</p>
        <h3>Outer Layer: The Protection</h3>
        <p>Also called the "shell layer," this final component shields you from wind, rain, and snow. The most important characteristics are:</p>
        <ul>
          <li>Water resistance or waterproofing</li>
          <li>Wind resistance</li>
          <li>Breathability</li>
          <li>Durability</li>
        </ul>
        <p>Shells range from lightweight windbreakers to fully waterproof, breathable hardshells with features like pit zips for ventilation.</p>
        <p><strong>Recommended options:</strong> Arc'teryx Beta AR, Outdoor Research Helium, Patagonia Torrentshell</p>
        <h2>Beyond the Basics: Advanced Layering</h2>
        <h3>The Hybrid Approach</h3>
        <p>Modern outdoor clothing often incorporates "hybrid" designs that use different materials in different zones of a single garment. For example, a mid-layer might use synthetic insulation in areas prone to sweating and down in areas that need maximum warmth.</p>
        <h3>Activity-Specific Considerations</h3>
        <p>Different outdoor activities demand different approaches to layering:</p>
        <ul>
          <li><strong>High-output activities (trail running, uphill hiking):</strong> Focus on breathability and moisture management with lighter, more breathable layers</li>
          <li><strong>Low-output activities (photography, fishing):</strong> Prioritize insulation with warmer layers</li>
          <li><strong>Stop-and-go activities (climbing, skiing):</strong> Bring versatile layers that can be quickly added or removed</li>
        </ul>
        <h2>Seasonal Layering Strategies</h2>
        <h3>Summer Layering</h3>
        <p>Even in summer, layering remains important, especially in alpine environments where weather can change rapidly:</p>
        <ul>
          <li>Lightweight, sun-protective base layer</li>
          <li>Ultralight mid layer (thin fleece or synthetic jacket)</li>
          <li>Packable windbreaker or rain shell</li>
        </ul>
        <h3>Winter Layering</h3>
        <p>Cold-weather layering requires more insulation and careful moisture management:</p>
        <ul>
          <li>Medium to heavyweight base layer</li>
          <li>Substantial mid layer (or multiple mid layers)</li>
          <li>Insulated outer layer or shell with room for layers underneath</li>
          <li>Additional accessories: insulated hat, gloves, neck gaiter, etc.</li>
        </ul>
        <h2>Common Layering Mistakes</h2>
        <ul>
          <li><strong>Overdressing:</strong> Leading to overheating and excessive sweating</li>
          <li><strong>Using cotton:</strong> Cotton holds moisture against the skin, leading to rapid heat loss</li>
          <li><strong>Too-tight layers:</strong> Restricts movement and reduces insulating air spaces</li>
          <li><strong>Not adjusting layers:</strong> Failing to add/remove layers as conditions and activity levels change</li>
        </ul>
        <h2>Caring for Your Layers</h2>
        <p>Proper care extends the life of technical clothing and maintains performance:</p>
        <ul>
          <li>Follow manufacturer washing instructions</li>
          <li>Use technical cleaners for waterproof/breathable fabrics</li>
          <li>Reapply DWR (Durable Water Repellent) treatments when water stops beading</li>
          <li>Store down items uncompressed</li>
        </ul>
        <h2>Conclusion: The Layering Mindset</h2>
        <p>Mastering layering is as much about mindset as it is about gear. Think of your layers as a system that you actively manage throughout your adventure. Be proactive—add a layer before you get cold, remove one before you overheat. With practice, you'll develop an intuitive sense for what adjustments to make and when.</p>
        <p>Remember that the "perfect" layering system varies from person to person based on individual metabolism, activity level, and personal preference. Use these guidelines as a starting point, but don't be afraid to experiment and develop a system that works specifically for you.</p>
        <p>With the right approach to layering, you'll stay comfortable in virtually any conditions—allowing you to focus less on discomfort and more on enjoying your outdoor adventures.</p>
      `,
      relatedGuides: [{
        id: 'hiking-boots',
        title: 'How to Choose Your First Hiking Boots',
        image: 'https://images.unsplash.com/photo-1542124292-60272943bc2e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80'
      }, {
        id: 'ultralight-packing',
        title: 'Ultralight Backpacking: A Complete Guide',
        image: 'https://images.unsplash.com/photo-1602156498253-ad0c84c1d008?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=700&q=80'
      }]
    }
  };
  const guide = guides[guideId] || {
    title: 'Guide Not Found',
    subtitle: 'The requested guide could not be found.',
    category: 'Error',
    readTime: '',
    author: '',
    publishDate: '',
    heroImage: 'https://images.unsplash.com/photo-1535392432937-a27c36ec07b5?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2000&q=80',
    tags: [],
    content: '<p>The guide you are looking for does not exist or has been moved.</p>',
    relatedGuides: []
  };
  return <div className="w-full bg-earth-dark">
      {/* Hero Section */}
      <section className="relative pt-20 pb-12 bg-carbon-black">
        <div className="container mx-auto px-4">
          <Link to="/guides" className="inline-flex items-center text-sand-light hover:text-outdoor-orange mb-6">
            <ArrowLeft size={16} className="mr-2" />
            Back to Guides
          </Link>
          <div className="max-w-4xl">
            <div className="flex items-center mb-4">
              <span className="bg-outdoor-orange text-white px-3 py-1 text-sm font-display mr-3">
                {guide.category}
              </span>
              <span className="text-gray-400 flex items-center">
                <Clock size={16} className="mr-1" />
                {guide.readTime}
              </span>
            </div>
            <h1 className="font-display text-4xl md:text-6xl mb-4">
              {guide.title}
            </h1>
            <p className="text-xl text-gray-300 mb-6">{guide.subtitle}</p>
            <div className="flex items-center justify-between">
              <div className="flex items-center">
                {guide.authorImage && <img src={guide.authorImage} alt={guide.author} className="h-10 w-10 rounded-full object-cover mr-3" />}
                <div>
                  <div className="font-bold">{guide.author}</div>
                  <div className="text-sm text-gray-400">
                    {guide.publishDate}
                  </div>
                </div>
              </div>
              <div className="flex space-x-3">
                <button className="p-2 rounded-full hover:bg-earth-dark transition-colors">
                  <Bookmark size={20} />
                </button>
                <button className="p-2 rounded-full hover:bg-earth-dark transition-colors">
                  <Share2 size={20} />
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
      {/* Guide Hero Image */}
      <div className="w-full h-[50vh] relative">
        <img src={guide.heroImage} alt={guide.title} className="w-full h-full object-cover" />
      </div>
      {/* Guide Content */}
      <section className="py-16">
        <div className="container mx-auto px-4">
          <div className="flex flex-col lg:flex-row gap-12">
            {/* Main Content */}
            <div className="lg:w-2/3">
              <article className="prose prose-lg prose-invert max-w-none">
                <div dangerouslySetInnerHTML={{
                __html: guide.content
              }} />
              </article>
              <div className="mt-12 pt-8 border-t border-gray-700">
                <div className="flex flex-wrap gap-2 mb-8">
                  <span className="text-gray-400 flex items-center mr-2">
                    <Tag size={16} className="mr-1" />
                    Tags:
                  </span>
                  {guide.tags.map(tag => <a key={tag} href={`/tags/${tag.toLowerCase()}`} className="bg-earth-dark hover:bg-outdoor-orange text-white px-3 py-1 rounded-full transition-colors text-sm">
                      {tag}
                    </a>)}
                </div>
                <div className="flex items-center justify-between">
                  <div className="flex items-center">
                    <User size={16} className="mr-2" />
                    <span>
                      Written by <strong>{guide.author}</strong>
                    </span>
                  </div>
                  <div className="flex space-x-3">
                    <button className="p-2 rounded-full hover:bg-earth-dark transition-colors">
                      <Bookmark size={20} />
                    </button>
                    <button className="p-2 rounded-full hover:bg-earth-dark transition-colors">
                      <Share2 size={20} />
                    </button>
                  </div>
                </div>
              </div>
            </div>
            {/* Sidebar */}
            <div className="lg:w-1/3">
              <div className="sticky top-24">
                <div className="bg-carbon-black rounded-lg p-6 mb-8">
                  <h3 className="font-display text-xl mb-4">IN THIS GUIDE</h3>
                  <nav className="space-y-2">
                    {/* This would ideally be generated from the content headings */}
                    <a href="#introduction" className="block text-outdoor-orange hover:underline">
                      Introduction
                    </a>
                    <a href="#key-concepts" className="block text-outdoor-orange hover:underline">
                      Key Concepts
                    </a>
                    <a href="#recommended-gear" className="block text-outdoor-orange hover:underline">
                      Recommended Gear
                    </a>
                    <a href="#techniques" className="block text-outdoor-orange hover:underline">
                      Techniques
                    </a>
                    <a href="#conclusion" className="block text-outdoor-orange hover:underline">
                      Conclusion
                    </a>
                  </nav>
                </div>
                {guide.relatedGuides.length > 0 && <div className="bg-carbon-black rounded-lg p-6">
                    <h3 className="font-display text-xl mb-4">
                      RELATED GUIDES
                    </h3>
                    <div className="space-y-4">
                      {guide.relatedGuides.map(related => <Link key={related.id} to={`/guides/${related.id}`} className="flex group">
                          <img src={related.image} alt={related.title} className="h-16 w-16 object-cover rounded mr-3" />
                          <div>
                            <h4 className="font-bold group-hover:text-outdoor-orange transition-colors">
                              {related.title}
                            </h4>
                            <div className="flex items-center text-outdoor-orange mt-1">
                              <span className="text-sm">Read Guide</span>
                              <ArrowRight size={14} className="ml-1 transition-transform group-hover:translate-x-1" />
                            </div>
                          </div>
                        </Link>)}
                    </div>
                  </div>}
              </div>
            </div>
          </div>
        </div>
      </section>
    </div>;
}